<template>
  <t-dialog v-model:visible="model" :header="dialogTitle" :confirm-loading="confirmPending" confirm-btn="确定" destroy-on-close @confirm="handleConfirm">
    <t-form ref="dialogForm" :rules="rules" :data="formData">
      <t-form-item label="渠道" name="companyId">
        <t-select v-model="formData.companyId" placeholder="请选择渠道" filterable :options="companyOptions" :loading="companySearchPending" @search="handleCompanySearch" />
      </t-form-item>
      <t-form-item label="导游姓名" name="guideName">
        <t-input v-model="formData.guideName" placeholder="请输入导游姓名" />
      </t-form-item>
      <t-form-item label="导游性别" name="gender">
        <t-select v-model="formData.gender" placeholder="请选择导游性别">
          <t-option v-for="item in GuideGender" :key="item" :label="channelGuideGenderDict[item]" :value="item" />
        </t-select>
      </t-form-item>
      <t-form-item label="导游电话" name="phone">
        <t-input v-model="formData.phone" placeholder="请输入导游电话" type="tel" />
      </t-form-item>
      <t-form-item label="导游配额类型" name="quotaType">
        <t-select v-model="formData.quotaType" placeholder="请选择导游配额类型">
          <t-option v-for="item in GuideQuotaType" :key="item" :label="channelGuideQuotaTypeDict[item]" :value="item" />
        </t-select>
      </t-form-item>
      <t-form-item label="导游配额" name="quotaAll">
        <t-input-number v-model="formData.quotaAll" placeholder="请输入导游配额" :allow-input-over-limit="false" :step="1" :min="0" :max="99999999" />
      </t-form-item>
      <t-form-item label="启用" name="enabled">
        <t-switch v-model="formData.enabled" :custom-value="[EnabledStatus.ENABLED, EnabledStatus.DISABLED]" />
      </t-form-item>
    </t-form>
  </t-dialog>
</template>
<script setup lang="ts">
import type { FormInstanceFunctions, FormRules } from 'tdesign-vue-next'
import { MessagePlugin } from 'tdesign-vue-next'
import { computed, reactive, ref, useTemplateRef, watch } from 'vue'

import { createChannelGuide, getChannelDetail, getChannelPageList, updateChannelGuide } from '@/api/channel'
import type { GuideReqData } from '@/api/model/channel'
import { GuideGender, GuideQuotaType } from '@/api/model/channel'
import { EnabledStatus } from '@/api/model/common'
import useSearchSelect from '@/hooks/selectSearch'
import { channelGuideGenderDict, channelGuideQuotaTypeDict } from '@/utils/dict/channel'

export type GuideFormDialogData = GuideReqData
const props = defineProps<{ id?: string, data: GuideFormDialogData }>()
const emits = defineEmits<{ (e: 'success'): void }>()
const model = defineModel('visible', { type: Boolean })
const isEditMode = computed(() => !!props.id)
const dialogTitle = computed(() => (isEditMode.value ? '编辑导游' : '添加导游'))
const formData = reactive<GuideFormDialogData>(props.data)
watch(
  () => props.data,
  () => {
    Object.assign(formData, props.data)
  },
)

const { selectOptions: companyOptions, searchLoading: companySearchPending, handleSearch: handleCompanySearch } = useSearchSelect(() => formData.companyId, async (companyId) => {
  const channelDetail = await getChannelDetail(companyId)
  return {
    label: channelDetail.companyName,
    value: channelDetail.id,
  }
}, async (_companyNameKey) => {
  const channelList = await getChannelPageList({ page: 1, size: 10, companyName: _companyNameKey, enabled: EnabledStatus.ENABLED })
  return channelList.data.map(item => ({ label: item.companyName, value: item.id }))
})

const rules: FormRules<GuideFormDialogData> = {
  companyId: [{ required: true, message: '请选择渠道', type: 'error' }],
  guideName: [{ required: true, message: '请输入导游姓名', type: 'error' }],
  phone: [{ required: true, message: '请输入导游手机号', type: 'error' }],
  gender: [{ required: true, message: '请选择性别', type: 'error' }],
  quotaType: [{ required: true, message: '请选择配额类型', type: 'error' }],
}
const confirmPending = ref(false)
const dialogForm = useTemplateRef<FormInstanceFunctions<GuideFormDialogData>>('dialogForm')
function handleConfirm() {
  confirmPending.value = true
  dialogForm.value?.validate().then((validateResult) => {
    if (validateResult === true) {
      if (isEditMode.value) {
        updateChannelGuide({ id: props.id!, ...formData }).then(() => {
          confirmPending.value = false
          model.value = false
          MessagePlugin.success('更新成功')
          emits('success')
        })
      }
      else {
        createChannelGuide(formData).then(() => {
          confirmPending.value = false
          model.value = false
          MessagePlugin.success('创建成功')
          emits('success')
        })
      }
    }
  })
}
</script>
<style scoped>

</style>
